<template>
	<view class="page">
		<!-- 用户基本信息 -->
		<view class="user-section">
			<view class="user-info">
				<image src="/static/svg/avatar-male.svg" class="avatar" />
				<view class="user-detail">
					<text class="username">小明同学</text>
					<text class="user-phone">138****5678</text>
				</view>
				<view class="edit-btn" @click="editProfile">
					<text class="edit-text">编辑</text>
				</view>
			</view>
		</view>

		<!-- 设置菜单 -->
		<view class="settings-section">
			<!-- 账号与安全 -->
			<view class="setting-group">
				<view class="group-title">账号与安全</view>
				<view class="setting-item" @click="navigateToSecurity">
					<view class="item-left">
						<image src="/static/svg/user.svg" class="item-icon" />
						<text class="item-title">账号与安全</text>
					</view>
					<view class="item-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>

			<!-- 消息通知 -->
			<view class="setting-group">
				<view class="group-title">消息通知</view>
				<view class="setting-item">
					<view class="item-left">
						<image src="/static/svg/comment.svg" class="item-icon" />
						<text class="item-title">推送通知</text>
					</view>
					<view class="item-right">
						<switch :checked="pushNotification" @change="togglePushNotification" />
					</view>
				</view>
				<view class="setting-item">
					<view class="item-left">
						<image src="/static/svg/comment.svg" class="item-icon" />
						<text class="item-title">评论通知</text>
					</view>
					<view class="item-right">
						<switch :checked="commentNotification" @change="toggleCommentNotification" />
					</view>
				</view>
				<view class="setting-item">
					<view class="item-left">
						<image src="/static/svg/heart.svg" class="item-icon" />
						<text class="item-title">点赞通知</text>
					</view>
					<view class="item-right">
						<switch :checked="likeNotification" @change="toggleLikeNotification" />
					</view>
				</view>
			</view>

			<!-- 隐私设置 -->
			<view class="setting-group">
				<view class="group-title">隐私设置</view>
				<view class="setting-item">
					<view class="item-left">
						<image src="/static/svg/user.svg" class="item-icon" />
						<text class="item-title">允许他人查看我的动态</text>
					</view>
					<view class="item-right">
						<switch :checked="allowViewActivity" @change="toggleAllowViewActivity" />
					</view>
				</view>
				<view class="setting-item">
					<view class="item-left">
						<image src="/static/svg/comment.svg" class="item-icon" />
						<text class="item-title">允许陌生人私信</text>
					</view>
					<view class="item-right">
						<switch :checked="allowStrangerMessage" @change="toggleAllowStrangerMessage" />
					</view>
				</view>
			</view>

			<!-- 通用设置 -->
			<view class="setting-group">
				<view class="group-title">通用设置</view>
				<view class="setting-item" @click="showLanguageSelector">
					<view class="item-left">
						<image src="/static/svg/comprehensive.svg" class="item-icon" />
						<text class="item-title">语言</text>
					</view>
					<view class="item-right">
						<text class="item-value">简体中文</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				<view class="setting-item" @click="clearCache">
					<view class="item-left">
						<image src="/static/svg/more.svg" class="item-icon" />
						<text class="item-title">清除缓存</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ cacheSize }}</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>

			<!-- 帮助与反馈 -->
			<view class="setting-group">
				<view class="group-title">帮助与反馈</view>
				<view class="setting-item" @click="showHelp">
					<view class="item-left">
						<image src="/static/svg/comprehensive.svg" class="item-icon" />
						<text class="item-title">帮助中心</text>
					</view>
					<view class="item-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				<view class="setting-item" @click="showFeedback">
					<view class="item-left">
						<image src="/static/svg/comment.svg" class="item-icon" />
						<text class="item-title">意见反馈</text>
					</view>
					<view class="item-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				<view class="setting-item" @click="showAbout">
					<view class="item-left">
						<image src="/static/svg/comprehensive.svg" class="item-icon" />
						<text class="item-title">关于我们</text>
					</view>
					<view class="item-right">
						<text class="item-value">v1.0.0</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-section">
				<view class="logout-btn" @click="logout">
					<text class="logout-text">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 通知设置状态
const pushNotification = ref(true)
const commentNotification = ref(true) 
const likeNotification = ref(false)

// 隐私设置状态
const allowViewActivity = ref(true)
const allowStrangerMessage = ref(false)

// 缓存大小
const cacheSize = ref('25.6MB')

// 编辑个人资料
const editProfile = () => {
	uni.navigateTo({
		url: '/pages/my/profile/index'
	})
}

// 账号与安全
const navigateToSecurity = () => {
	uni.showToast({
		title: '功能开发中...',
		icon: 'none'
	})
}

// 通知设置切换
const togglePushNotification = (e) => {
	pushNotification.value = e.detail.value
	uni.showToast({
		title: pushNotification.value ? '已开启推送通知' : '已关闭推送通知',
		icon: 'none'
	})
}

const toggleCommentNotification = (e) => {
	commentNotification.value = e.detail.value
	uni.showToast({
		title: commentNotification.value ? '已开启评论通知' : '已关闭评论通知',
		icon: 'none'
	})
}

const toggleLikeNotification = (e) => {
	likeNotification.value = e.detail.value
	uni.showToast({
		title: likeNotification.value ? '已开启点赞通知' : '已关闭点赞通知',
		icon: 'none'
	})
}

// 隐私设置切换
const toggleAllowViewActivity = (e) => {
	allowViewActivity.value = e.detail.value
	uni.showToast({
		title: allowViewActivity.value ? '允许他人查看动态' : '不允许他人查看动态',
		icon: 'none'
	})
}

const toggleAllowStrangerMessage = (e) => {
	allowStrangerMessage.value = e.detail.value
	uni.showToast({
		title: allowStrangerMessage.value ? '允许陌生人私信' : '不允许陌生人私信',
		icon: 'none'
	})
}

// 语言选择
const showLanguageSelector = () => {
	uni.showActionSheet({
		itemList: ['简体中文', 'English', '繁體中文'],
		success: (res) => {
			const languages = ['简体中文', 'English', '繁體中文']
			uni.showToast({
				title: `已切换到${languages[res.tapIndex]}`,
				icon: 'none'
			})
		}
	})
}

// 清除缓存
const clearCache = () => {
	uni.showModal({
		title: '清除缓存',
		content: `确定要清除 ${cacheSize.value} 的缓存数据吗？`,
		success: (res) => {
			if (res.confirm) {
				// 模拟清除缓存
				setTimeout(() => {
					cacheSize.value = '0MB'
					uni.showToast({
						title: '缓存已清除',
						icon: 'success'
					})
				}, 1000)
				
				uni.showLoading({
					title: '清除中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
			}
		}
	})
}

// 帮助中心
const showHelp = () => {
	uni.showModal({
		title: '帮助中心',
		content: '如需帮助，请联系客服：\n邮箱：support@example.com\n电话：400-123-4567',
		showCancel: false,
		confirmText: '知道了'
	})
}

// 意见反馈
const showFeedback = () => {
	uni.showModal({
		title: '意见反馈',
		content: '感谢您的反馈！您可以通过以下方式联系我们：\n邮箱：feedback@example.com\n微信群：扫描二维码加入',
		showCancel: false,
		confirmText: '知道了'
	})
}

// 关于我们
const showAbout = () => {
	uni.showModal({
		title: '关于应用',
		content: '知识搭子 v1.0.0\n\n一款专注于知识分享与交流的社区应用\n\n© 2024 All Rights Reserved',
		showCancel: false,
		confirmText: '知道了'
	})
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出当前账号吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
				// 可以在这里添加清除用户数据、跳转到登录页等逻辑
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}, 1500)
			}
		}
	})
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 用户信息区域 */
.user-section {
	background: white;
	margin-bottom: 20px;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 20px;
}

.avatar {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #f0f0f0;
	margin-right: 15px;
}

.user-detail {
	flex: 1;
}

.username {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.user-phone {
	font-size: 14px;
	color: #999;
	display: block;
}

.edit-btn {
	padding: 8px 16px;
	background: #667eea;
	border-radius: 20px;
}

.edit-text {
	font-size: 14px;
	color: white;
}

/* 设置区域 */
.settings-section {
	padding: 0 20px;
}

.setting-group {
	background: white;
	border-radius: 12px;
	margin-bottom: 20px;
	overflow: hidden;
}

.group-title {
	font-size: 14px;
	color: #666;
	padding: 15px 20px 10px;
	background: #fafafa;
	font-weight: 500;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid #f8f9fa;
	transition: background-color 0.2s;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-item:active {
	background: #f8f9fa;
}

.item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.item-icon {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	filter: opacity(0.6);
}

.item-title {
	font-size: 16px;
	color: #333;
}

.item-right {
	display: flex;
	align-items: center;
}

.item-value {
	font-size: 14px;
	color: #999;
	margin-right: 8px;
}

.arrow-icon {
	width: 14px;
	height: 14px;
	transform: rotate(90deg);
	filter: opacity(0.4);
}

/* 退出登录 */
.logout-section {
	margin-top: 40px;
	margin-bottom: 40px;
}

.logout-btn {
	background: white;
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	transition: background-color 0.2s;
}

.logout-btn:active {
	background: #fff5f5;
}

.logout-text {
	font-size: 16px;
	color: #ff4757;
	font-weight: 500;
}

/* switch 组件样式调整 */
switch {
	transform: scale(0.8);
}
</style> 